<template>
  <div ref="echartsRef" class="echartsContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onBeforeUnmount, onMounted, ref } from "vue";

const echartsRef = ref<HTMLDivElement>();

let myChart = ref<echarts.ECharts>();
onMounted(() => {
  initEcharts();
  window.addEventListener("resize", handleWinResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleWinResize);
});

const handleWinResize = () => {
  myChart.value && myChart.value.resize();
};

const initEcharts = () => {
  myChart.value = echarts.init(echartsRef.value);
  updateOptions();
};
const updateOptions = () => {
  const data = [];
  for (let i = 0; i < 24; i++) {
    data.push({
      name: `${i}:00-${i + 1}:00`,
      value: Math.random() * 1000 - 500,
    });
  }
  myChart.value?.setOption({
  // title: {
  //   text: 'Bar Chart with Negative Value'
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  yAxis: {
    type: 'value',
    position: 'top',
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: "category",
    data: data.map((e) => e.name),
    axisTick: {
      alignWithLabel: true,
    },
    axisLabel: {
      interval: 4,
    },
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
  },
  series: [
    {
      name: "Direct",
      type: "bar",
      barWidth: 10,
      data: data.map((e) => e.value),
      itemStyle: {
        color: "#167cf3",
      },
    },
  ]});
};
</script>

<style scoped lang="scss">
.echartsContainer {
  width: 100%;
  height: 400px;
  background-color: #fff;
}
</style>
